import { useState } from "react";

const Index = () => {
  // 发展史语法、死循环

  // 语法： const 数组 = useState(一个实参写状态的默认值)  // 返回的是一个数组，数组中第一个存了状态数据，第二个存放了函数用户修改状态

  // const data = useState(0);
  // console.log(111, data);

  // 多学一招：实战一般都不会这写 会解构
  console.log(555555);

  const [num, setNum] = useState(0); // [0, fn]
  const [num2, setNum2] = useState(0);

  console.log(777777);

  //   setNum(num + 1);

  return (
    <fieldset>
      <legend>02-函数组件状态</legend>

      <h1>num {num}</h1>

      <button
        onClick={() => {
          setNum(num + 1); // 1 内存数据+1，  2 让Index函数重新渲染
        }}
      >
        num+1
      </button>

      <h1>num2 {num2}</h1>
      <button
        onClick={() => {
          setNum2(num2 + 1);
        }}
      >
        num2+1
      </button>
    </fieldset>
  );
};

export default Index;
